<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>售票页面</title>
<link rel="stylesheet" href="${ctx}/static/plug/weui/css/weui.css"
	media="all">

<link rel="stylesheet" href="${ctx}/static/plug/weui/css/weuix.css"
	media="all">
	<link rel="stylesheet" href="${ctx}/static/css/PC/ticketPurchase.css"
	media="all">
	
<style type="text/css">
.weui-input{
	border-bottom: 1px solid #777; 
}
</style>



</head>
<body>
	<div class="header">
		<p align="center">请刷身份证或输入证件号购买</p>
		<div class="datetime">
			<span class="times"></span>
		</div>
	</div>
	<div class="ticketType">
		<c:forEach var="ticketInfo" items="${ticketInfoList}">
		
			<div class="ticket_purchases">
					<input class="ticketInfoId" name="f1" id="${ticketInfo.id}"
							value="${ticketInfo.price}" type="hidden">
					${ticketInfo.name }
			</div>
		</c:forEach>
	</div>
	<div class="bodyer">
	<div class="subjects">
		<h2 align="center" style="color: #f39800">票价：<span id="ticketInfoPrice"></span>元</h2>
	<br>
	<p align="center">请刷身份证或输入证件号购买</p>
	
	<input type="hidden" id="orderId" value="">
		<div class="ticket_purchase">
			<div class="dels" onclick="del(this)">删除</div>
			<div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input username" placeholder="请输入姓名" type="text" maxlength="15">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">身份证</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input idNumber"  placeholder="请输入身份证号" type="number" oninput="if(value.length>18)value=value.slice(0,18)" >
        	<input type="hidden" class="bid"  value="">
        </div>
    </div>
		
		</div>
	</div>
		<div class="addTicket"><img alt="" src="${ctx}/static/images/add.png" ></div>
		<br>
		<br>
		<p align="center" id="manual">提交证件信息</p>
	
	</div>
	<div class="tailer">
		
		<div class="returns">
			<p>返回上一步</p>
		</div>
	</div>
	<div class="floatingWindow" id="floatingWindowActivation">
		<div>
			<p>微信扫码支付</p>
			<p style="color: #f39800" id="priceStr"></p>
			<img id="imgQRCODE" >
			<p id="paySuccess"></p>
			<p class="floatingSpan"><span class="Continue">取消</span><span class="returnKeys">返回首页</span></p>
		</div>
	</div>
	
</body>












<script src="${ctx}/static/js/jquery/jquery-3.2.1.min.js"></script>
<script src="${ctx}/static/js/common.js"></script>
<script src="${ctx}/static/js/aes.js"></script>
<script src="${ctx}/static/plug/weui/js/zepto.weui.js"
	type="text/javascript"></script>
<script src="${ctx}/static/plug/weui/js/zepto.min.js"
	type="text/javascript"></script>


<script>
var socket;
function del(value) {
	
	
	
	
	console.log($(".ticket_purchase").length)
	if($(".ticket_purchase").length == 1){
		return;
	}
	console.log(value)
	console.log($(value))
	$(value).parent().remove();
}

	$(function() {
		$(".ticket_purchases").click(function() {
			console.log($(this))
			$(".ticket_purchases").css("background-color" , "white");
			$(".ticket_purchases").css("color" , "#888");
			$(this).css("background-color" , "#286abf");
			$(this).css("color" , "white");
			
			var ticketPrices = $(this).find(".ticketInfoId").val();
			var num = $(this).find(".ticketInfoId").attr("id");
			console.log(ticketPrices)
			console.log(num)
			ticketPrices = parseInt(ticketPrices);
			if(ticketPrices){
				prices = ticketPrices;
				console.log(prices);
			}
			
			$("#ticketInfoPrice").text((ticketPrices/100).toFixed(2));
			num = parseInt(num);
			ticketInfoId = num
		});
		var ticketInfoId = 0;
		
		
		
		$(".addTicket").click(function() {
			$(".subjects").append(htmlVal);
			generate();
			
		});
		
		$(".returnKeys").click(function() {
			window.location.href="${ctx}/pc/automatic/index";
		});
		$(".Continue").click(function() {
			$("#floatingWindowActivation").css("display","none");
		});
		
		
		getNowFormatDate();
		webSocketConnect();
		var printNumVal = 0;
		function webSocketConnect() {
			var serverIP = localStorage.serverIP;
	   		var serverPort = localStorage.serverPort;
	   		var host = "ws://" + serverIP + ":" + serverPort + "/"
	        socket = new WebSocket(host);
	   	 	try {
           	  socket.onopen = function (msg) {
	               localStorage.serverIP = serverIP;
	               localStorage.serverPort = serverPort;
            	};
              socket.onmessage = function (msg) {
                if (typeof msg.data == "string") {
                	var data = $.parseJSON(msg.data);
                	if(data.code == "000"){
                		var deviceNo = data.device_id;
						var data = data.data;
						console.log(data)
						if(data.print_result == "000000"){
							console.log(data.ticket_id)
							var params = {
									"orderDetailId":data.ticket_id,
									"deviceNo":deviceNo
								}
							console.log(JSON.stringify(params));
							params = aesHex(JSON.stringify(params));
							console.log(params);
							$.post("${ctx}/pc/pickUp/updatePrprint",{"params" : params}  , function(obj) {
								if(obj.status){
									printNumVal++;
									console.log(printNumVal);
									console.log(printNumTatol);
									if(printNumVal == printNumTatol){
										window.location.reload();
									}
								}else {
									$.toast(obj.msg, "forbidden");
								}
					        });
						}else if(data.print_result == "111111"){
							$.toast(data.print_status, "forbidden");
						}
            		}
                	
                	
                	
                	if(data.code == "002"){
                		localStorage.deviceNo = data.device_id;
						var resultStr = data.data;
						console.log(resultStr);
						var name = resultStr.name;
						var idNumber = resultStr.cid;
						var bid = resultStr.bid;
						name   =   name.replace(/\s+/g,"");  
						for (var i = 0; i < $(".subjects").find(".idNumber").length; i++) {
							if($(".subjects").find(".idNumber").eq(i).val() == idNumber){
								 $.toast("重复证件号！", "forbidden");
								return;
							}
						}
						for (var i = 0; i < $(".subjects").find(".idNumber").length; i++) {
							if($(".subjects").find(".idNumber").eq(i).val().length == 0){
								$(".username").eq(i).val(name);
								$(".idNumber").eq(i).val(idNumber);
								$(".bid").eq(i).val(bid);
								$(".username").eq(i).css("border","0px solid #999");
								$(".idNumber").eq(i).css("border","0px solid #999");
								return;
							}
						}
						
						$(".subjects").append(htmlVal);
						$(".username").last().val(name);
						$(".username").last().css("border","0px solid #999");
						$(".idNumber").last().val(idNumber);
						$(".bid").last().val(bid);
						$(".idNumber").last().css("border","0px solid #999");
						generate();
            			}
	                }
	                else {
	                    $.toast("非文本消息！", "forbidden");
	                }
            	};
              socket.onclose = function (msg) { 
            	  $.confirm("连接设备失败是否继续连接", "提示", function() {
              		 webSocketConnect();
                   }, function() {
                       //取消操作
                   });
           		  };
        	}catch (ex) {
	            log(ex);
	            webSocketConnect();
        	}
		};
		var htmlVal = '<div class="ticket_purchase"><div class="dels" onclick="del(this)">删除</div><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">姓名</label></div>'+
        	'<div class="weui-cell__bd"><input class="weui-input username" " placeholder="请输入姓名" type="text" maxlength="15"></div></div>'+
    		'<div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">身份证</label></div>'+
       		'<div class="weui-cell__bd"><input class="weui-input idNumber" " placeholder="请输入身份证号" type="number" oninput="if(value.length>18)value=value.slice(0,18)" ><input type="hidden" class="bid"  value=""></div></div></div>'
		
    	var reg=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|30|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
		generate();
       	function generate() {
       		$(".subjects").children().find(".idNumber").unbind();
			$(".subjects").children().find(".idNumber").bind("input propertychange",function() {
    			var idNumber = $(this).val()
    			$(this).css("border-bottom","1px solid #777");
    			if(reg.test(idNumber)){ 	
    				$(this).css("border-bottom","0px solid #999");
    				for (var i = 0; i < $(".subjects").find(".idNumber").length; i++) {
		    			console.log($(".subjects").find(".idNumber").eq(i).val())
		    			for (var j = 0; j <  $(".subjects").find(".idNumber").length; j++) {
		    				console.log($(".subjects").find(".idNumber").eq(j).val())
		    				if(i != j && $(".subjects").find(".idNumber").eq(i).val().length != 0){
		    					if($(".subjects").find(".idNumber").eq(i).val() == $(".subjects").find(".idNumber").eq(j).val()){
		           				$.toast("重复证件号！", "forbidden");
		           				 $(this).val("");
		           				 $(this).css("border-bottom","1px solid #777");
		           				 return;
		           					}
		    					}
							}
		    			}
    			}
    		});
			$(".subjects").children().find(".userName").unbind();
    		$(".subjects").children().find(".userName").bind("input propertychange",function() {
    			var userName = $(this).val()
    			$(this).css("border-bottom","1px solid #777");
    			if(2 <= userName.length && userName.length<= 5){
    				$(this).css("border-bottom","0px solid #999");
    			}
    			
    		});
		}
       	
       	var ticketOrderDetailVoList;
       	var submission = true;
       	
       	var printNumTatol = 0;
		$("#manual").click(function() {
			if(submission == false){
				return;
			}
			var userIdInfoList = new Array();
			for (var i = 0; i < $(".ticket_purchase").length; i++) {
				var userIdInfoId = new Object();
					if($(".ticket_purchase").eq(i).find(".username").val().length !=0 && $(".ticket_purchase").eq(i).find(".idNumber").val().length !=0){
						userIdInfoId.userName = $(".ticket_purchase").eq(i).find(".username").val();
						if(2 >userIdInfoId.userName.length ||5 <userIdInfoId.userName.length){
							 $.toast("游客姓名不正确", "forbidden");
							 return;
						}
						userIdInfoId.idNumber = $(".ticket_purchase").eq(i).find(".idNumber").val();
						if(userIdInfoId.idNumber != "" && !reg.test(userIdInfoId.idNumber)){
							 $.toast("游客身份证输入不正确", "forbidden");
							return;
						}
						userIdInfoId.bid = $(".ticket_purchase").eq(i).find(".bid").val();
						userIdInfoList[i] = userIdInfoId;
					}
			}
			if(userIdInfoList.length == 0 ){
				 $.toast("没有输入游客信息", "forbidden");
				 submission = true;
				 return;
			}
			if(ticketInfoId == 0){
				$.toast("没有选择票种！", "forbidden");
				 submission = true;
				 return;
			}
			console.log(ticketInfoId);
			var params = {
					"userIdInfoList" : JSON.stringify(userIdInfoList),
					"ticketInfoId" : ticketInfoId ,
					"deviceNo" : localStorage.deviceNo
			}
			params = aesHex(JSON.stringify(params));
			submission = false;
			$.post("${ctx}/pc/automatic/placeAnOrder", {"params":params} , function(obj) {
				console.log(obj);
				if(obj.codeUrl.length >0){
					$("#floatingWindowActivation").css("display","block");
					$("#orderId").val(obj.ticketOrderId);
					$("#imgQRCODE").attr("src","data:image/jpg;base64,"+obj.codeUrl);
					$("#priceStr").text("共"+obj.ticketNums + "张票，一共" +obj.totalFee + "元。")
					printNumTatol = obj.ticketNums;
					submission = true;
					setTimeout(polling, 1000);
					ticketOrderDetailVoList = obj.ticketOrderDetailVoList;
					
					
				}
        	});
		});
		
		function polling() {
			var orderId = $("#orderId").val();
			var params = {
					"orderId" :orderId,
			}
			params = aesHex(JSON.stringify(params));
			$.post("${ctx}/pc/automatic/pollingFindOrder", {"params":params} , function(obj) {
				console.log(obj);
				ticketOrderDetailVoList = obj.ticketOrderDetailVoList;
				if(obj.status){
					$("#imgQRCODE").remove();
					$(".floatingSpan").css("display" , "none");
					$("#paySuccess").text("支付成功,打印中。。。");
					for (var i = 0; i < ticketOrderDetailVoList.length; i++) {
						console.log(ticketOrderDetailVoList)
						console.log(ticketOrderDetailVoList.length)
						var ticketOrderDetailVo = ticketOrderDetailVoList[i];
						delete ticketOrderDetailVo["insertMap"];
						delete ticketOrderDetailVo["qrCode"];
						delete ticketOrderDetailVo["printTime"];
						delete ticketOrderDetailVo["createTime"];
						delete ticketOrderDetailVo["entryTime"];
						delete ticketOrderDetailVo["lastVerifyTime"];
						delete ticketOrderDetailVo["updateTime"];
						delete ticketOrderDetailVo["validTime"];
						console.log(ticketOrderDetailVo);
						var cmd = {
								"cmd":"print",
								"qrcode_val":ticketOrderDetailVo.checkCode,
								"qrcode_img":ticketOrderDetailVo.qrCodeStr,
								"ticket_id":ticketOrderDetailVo.id,
								"ticket_Val" : ticketOrderDetailVo
						};
						console.log(cmd);
						socket.send(JSON.stringify(cmd));
					}
				}else {
					setTimeout(polling, 1000);
				}
			});
		}
		
		$(".returns").click(function() {
			window.location.href="${ctx}/pc/automatic/index";
		});
		
		$(".ticket_purchases").first().click();
	});
	function getNowFormatDate() {
	    var date = new Date();
	    var seperator1 = "-";
	    var seperator2 = ":";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    var secondStr = date.getSeconds();
		var minuteStr = date.getMinutes();
		var hourStr = date.getHours();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
	    if (secondStr >= 0 && secondStr <= 9) {
			secondStr = "0" + secondStr;
		}
		if (minuteStr >= 0 && minuteStr <= 9) {
			minuteStr = "0" + minuteStr;
		}
		if (hourStr >= 0 && hourStr <= 9) {
			hourStr = "0" + hourStr;
		}
		
		var currentdate = date.getFullYear() + seperator1 + month + seperator1
		+ strDate + " " + hourStr + seperator2 + minuteStr
		+ seperator2 + secondStr;
	    $(".times").text(currentdate);
	    setTimeout(getNowFormatDate, 1000);
	}
	
</script>


</html>